<template>
	<div class="deptbox">
		<el-row>
			<el-tabs type="border-card" v-model="activeName">
				<el-tab-pane label="所有部门" name="0">
					<div>
						<span style="color:crimson;float:right"> 当前有:{{emps.length}}名员工还未分配部门</span> 
						<el-button type="primary" style="float:left" @click="adddept">新增部门</el-button>
					</div>
					<el-table :data="depts">
						<el-table-column prop="deptno" label="id"></el-table-column>
						<el-table-column prop="dname" label="部门名称"></el-table-column>
						<el-table-column prop="num" label="人数"></el-table-column>
						<el-table-column label="操作">
							<template slot-scope="s">
					<!-- 利用作用域插槽，将当前行作为参数传给了方法del -->
					<!-- s.$index可以获取当前行数据的索引 -->
								<el-button type="success" @click="addemp(s.$index,s.row)">添加新员工</el-button>
							</template>
						</el-table-column>
						<el-table-column label="操作">
							<template slot-scope="t">
								<el-button type="warning" v-if="t.row.eid==null" @click="addmanager(t.$index,t.row)">添加经理</el-button>
								<el-button type="warning" v-if="t.row.eid!=null" disabled>已有经理</el-button>
							</template>
						</el-table-column>
					</el-table>
	
					<el-dialog title="部门添加员工" :visible.sync="dialogFormVisible">
						<el-form :model="form" label-width="100px">
							<el-form-item label="部门名称:">
								<el-input v-model="form.dname" autocoplete="off"></el-input>
							</el-form-item>
							<!-- <el-form-item label="请输入员工ID:">
								<el-input v-model="eid" autocoplete="off" @change="checkemp"></el-input>
							</el-form-item> -->
							<el-form-item label="请选择员工:" >
								<el-select v-model="pickemp" placeholder="请选择" style="float:left" @change="checkemp()">
									<el-option
										v-for="item in emps"
										v-if="item.job=='stuff'"
										:key="item.eid"
										:label="item.ename"
										:value="item.eid">
									</el-option>
									<el-input v-model="form.deptno" autocoplete="off" type="hidden"></el-input>
									<el-input v-model="form.num" autocoplete="off" type="hidden"></el-input>
								</el-select>
							</el-form-item>
							<el-button type="primary" @click="sureAddEMP(form.deptno)" :disabled="disable">确 定</el-button>
						</el-form>
					</el-dialog>
					
					<el-dialog title="部门添加经理" :visible.sync="dialogFormVisible4">
						<el-form :model="form" label-width="100px">
							<el-form-item label="部门名称:">
								<el-input v-model="form.dname" autocoplete="off"></el-input>
							</el-form-item>
							<el-form-item label="请选择经理:" >
								<el-select v-model="pickemp" placeholder="请选择" style="float:left" @change="checkemp()">
									<el-option
										v-for="item in emps"
										v-if="item.job =='manager'"
										:key="item.eid"
										:label="item.ename"
										:value="item.eid">
									</el-option>
									<el-input v-model="form.deptno" autocoplete="off" type="hidden"></el-input>
									<el-input v-model="form.num" autocoplete="off" type="hidden"></el-input>
								</el-select>
							</el-form-item>
							<el-button type="primary" @click="sureAddManager(form.deptno)" :disabled="disable">确 定</el-button>
						</el-form>
					</el-dialog>
					<el-dialog title="新增部门" :visible.sync="dialogFormVisible2">
						<el-form :model="form" label-width="100px" :rules="rules">
							<el-form-item label="部门名称:" prop="dname">
								<el-input v-model="form.dname" autocoplete="off"></el-input>
							</el-form-item>
							<el-form-item>
								<el-input v-model="form.num" autocoplete="off" type="hidden"></el-input>
							</el-form-item>
							<el-button type="primary" @click="sureAdddept" :disabled="disable3">确 定</el-button>
						</el-form>
					</el-dialog>
				</el-tab-pane>
				<el-tab-pane label="删除部门" name="1">
					<el-form  label-width="100px">
						<el-form-item label="请选择部门:" >
							<el-select v-model="pickdept" placeholder="请选择" style="float:left" @change="checkdept()">
								<el-option
									v-for="item in depts"
									:key="item.deptno"
									:label="item.dname"
									:value="item.deptno">
								</el-option>
							</el-select>
						</el-form-item>	
						<el-form-item>
							<span style="color:#F56C6C;font-size:12px">{{error}}</span><br/>		
						</el-form-item>
						<el-button type="primary" @click="sureDeldept()" :disabled="disablex">确 定</el-button>
					</el-form>
				</el-tab-pane>
			</el-tabs>
		</el-row>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				rules:{
					/* 验证的对象 */
					deptno:[
						/* 必须验证   message提示  trigger验证触发事件*/
						{ required: true, message: '请输入部门编号', trigger: 'blur'},
						{ pattern: /^[1-9][0]$/, message: '请输入10的倍数', trigger: 'blur'},
					],
					dname:[
						{ required: true, message: '请输入部门名称', trigger: 'blur'},
					]
				},
				dialogFormVisible:false,
				dialogFormVisible2:false,
				dialogFormVisible3:true,
				dialogFormVisible4:false,
				disable:true,
				disablex:true,
				disable3:false,
				disablem:false,
				eid:'',
				form:{
						deptno:'',
						dname:'',
						num:0
					},
				depts:[],
				emps:[],
				pickemp:'',
				pickdept:'',
				error:'',
				error2:'',
				activeName:''
			};
		},
		created(){
			this.$axios.post("showdept").then(v=>{
				console.log(v)
				if(v.data){
					//this.deptsandemps=v.data;
					this.depts=v.data.depts;
					this.emps=v.data.emps;
				}else{
					this.$message.error("出错了！！")
					//alert("出错了！！");
				}
			}).catch(ex=>{
				this.$message.error("出错了！！")
				//alert("出错了！"+ex);
			})
		},
		methods:{
			//添加员工
			addemp(index,row){
				//alert(this.emps.id);
				this.dialogFormVisible=true;
				this.form={
					deptno:row.deptno,
					dname:row.dname,
					num:row.num+1
					}
				this.myindex=index;	
			},
			sureAddEMP(did){
				this.$axios.post("changedept?eid="+this.pickemp+"&deptno="+did+"").then(v=>{
					console.log(v)
					if(v.data){
						this.$message.success("部门添加员工成功！！")
						//alert("部门添加员工成功！！");
					}else{
						this.$message.error("出错了！！")
						//alert("出错了！！");
					}
				}).catch(ex=>{
					this.$message.error("出错了！！")
					//alert("出错了！"+ex);
				})
				//确认添加
				this.dialogFormVisible=false;
				for(var i=0;i<this.emps.length;i++){
					if(this.emps[i].eid==this.pickemp){
						this.emps[i].deptno=did;
						this.emps.splice(i,1);
						break;
					}
				} 
				//this.depts.splice(this.myindex,1,this.form);
				this.pickemp='';
				this.form={
					id:'',
					dname:'',
					num:0
				}
			},
			
			//添加经理
			addmanager(index,row){
				this.dialogFormVisible4=true;
				this.form={
					deptno:row.deptno,
					dname:row.dname,
					num:row.num+1
					}
				this.myindex=index;	
			},
			sureAddManager(did){
				this.$axios.post("putinmanager?eid="+this.pickemp+"&deptno="+did+"").then(v=>{
					console.log(v)
					if(v.data){
						//("部门添加经理成功！！");
						this.$message.success("部门添加经理成功！！")
						this.$router.push("/home/querydept");
					}else{
						this.$message.error("出错了！！")
						//alert("出错了！！");
					}
				}).catch(ex=>{
					this.$message.error("出错了！！"+ex)
					//alert("出错了！"+ex);
				})
				//确认添加
				this.dialogFormVisible4=false;
				for(var i=0;i<this.emps.length;i++){
					if(this.emps[i].eid==this.pickemp){
						this.emps[i].deptno=did;
						this.emps.splice(i,1);
						break;
					}
				} 
				this.depts.splice(this.myindex,1,this.form);
				this.pickemp='';
				this.form={
					id:'',
					dname:'',
					num:0
				}
			},
			
			checkemp(){
				if(this.pickemp!=''){
					this.disable=false;
				}else{
					this.disable=true;
				}
			},
			adddept(){
				var n=this.depts.length;
				this.form={
					deptno:this.depts[n-1].deptno+10,
					dname:'',
					num:0
				}
				this.dialogFormVisible2=true;
			},
			sureAdddept(){
				//确认添加
				this.$axios.post("moredept",this.form).then(v=>{
					console.log(v)
					if(v.data){
						alert("新增部门成功！！");
						this.$router.push("/home/querydept");
					}else{
						alert("出错了！！");
					}
				}).catch(ex=>{
					alert("出错了！"+ex);
				})
				this.dialogFormVisible2=false;
				this.depts.push(this.form);
			},
			checkdept(){
				if(this.pickdept!=''){
					for(var i=0;i<this.depts.length;i++){
						if(this.depts[i].deptno==this.pickdept){
							if(this.depts[i].num==0){
								this.error="";
								this.disablex=false;
							}else{
								this.error='该部门下还有员工，请先清理该部门下员工';
								this.disablex=true;
							}
							break;
						}
					}
				}else{
					this.disablex=true;
				}
			},
			checkdid(did){
				for(var i=0;i<this.depts.length;i++){
					if(this.depts[i].deptno==did){
						this.error2='已有该id,重复';
						this.disable3=true;
						break;
					}
					if(i==this.depts.length-1){
						this.error2='';
						this.disable3=false;
					}
				}
			},
			sureDeldept(){
				this.$axios.post("removedept?id="+this.pickdept+"").then(v=>{
					console.log(v)
					if(v.data){
						alert("删除部门成功！！");
					}else{
						alert("出错了！！");
					}
				}).catch(ex=>{
					alert("出错了！"+ex);
				})
				for(var i=0;i<this.depts.length;i++){
					if(this.depts[i].deptno==this.pickdept){
					this.depts.splice(i,1);
					}
				}
				this.pickdept='';
				this.activeName="0";
			}
		}
	}
</script>

<style>
 
</style>
